<template>
  <div id="route-main">

    <el-scrollbar>
      <MainHeader />
      <div id="route-nav">
        <!-- 左侧导航目录的初始化，nodes配置项传入nodes即可 -->
        <TreeLeft :nodes="route.nodes" :latestIndex="latestIndex"></TreeLeft>
        <!-- 开始学习按钮，鼠标悬浮闪烁效果 -->
        <div id="shiny-shadow">
          <button id="startStudy" @click="handleClickLearn" v-if="audit === false"><span>
              <a-icon type="read" />&nbsp;&nbsp;{{ studyContent }}
            </span></button>
        </div>
      </div>

      <!-- 结点的标题、资源和描述的介绍，node配置项类型为node{title:String, resource:[], description:String}, 传入nodes中的一项即可-->
      <div id="route-mid">
        <node-description :node="route.nodes[currentIndex]" :isOverview="isOverview" :routeTitle="route.title"
          :routeDescription="route.description" :alreadyStudied="currentIndex < latestIndex" :isAudit="audit"
          :learned="learned" :tags="route.tags">
        </node-description>
        <!-- <mavon-editor v-model="nodes[selectedIndex].description"
                      ref=md /> -->

        <!-- 评论-->
        <el-collapse id="comment" v-if="audit === false">
          <el-collapse-item>
            <template slot="title">
              &nbsp;&nbsp;评论区
            </template>
            <div style="margin-top: 10px; margin-bottom: 10px; display:flex;">
              <el-avatar :src="avatar" :size="40"></el-avatar>
              <el-input style="width:70%;margin-right: 3%; margin-left: 3%;" placeholder="说说你的感想吧~"
                v-model="tempComment" :disabled="!isLogin"></el-input>
              <el-button type="primary" size="medium" @click="submitComment" :disabled="!isLogin">发表评论</el-button>

            </div>
            <el-divider style="margin-top: 20px;" />
            <div v-for="(comment, index) in comments" :key="comment.id">
              <div style="display: flex">
                <el-avatar :src="comment.avatar" :size="30"></el-avatar>
                <span
                  style="line-height: 30px; font-size: 20px; vertical-align: middle; margin-left: 10px; font-weight: 400;">{{
                      comment.username
                  }}</span>
              </div>
              <div style="margin-top:15px;margin-left: 40px;font-size:15px;width:80%;">
                <div style="font-size:15px;">
                  {{ comment.commentLines }}
                </div>
                <i class="el-icon-delete-solid" id="delete-comment" @click="deleteComment(index)"
                  v-if="isSelf || isAdmin">&nbsp;&nbsp;删除</i>

                <div style="margin-left: 10px; margin-top: 30px;">
                  <el-collapse id="sub-comment">
                    <el-collapse-item>
                      <template slot="title">
                        <span style="color: #409eff">查看回复</span>
                      </template>
                      <div style="margin-top: 10px;margin-bottom: 10px; display:flex;">
                        <el-avatar :src="avatar" :size="40"></el-avatar>
                        <el-input style="width:70%;margin-right: 3%; margin-left: 3%;" placeholder="说说你的感想吧~"
                          v-model="tempSubComment" :disabled="!isLogin">
                        </el-input>
                        <el-button type="primary" size="medium" @click="submitSubComment(index)" :disabled="!isLogin">
                          发表评论</el-button>

                      </div>
                      <el-divider style="margin-top: 20px;" />
                      <div v-for="(subComment, i) in comment.subComments" :key="subComment.id"
                        style=" margin-bottom: 30px;">
                        <div style="display: flex">
                          <el-avatar :src="subComment.avatar" :size="30"></el-avatar>
                          <span
                            style="line-height: 30px; font-size: 20px; vertical-align: middle; margin-left: 10px; font-weight: 400;">
                            {{ subComment.username }}
                          </span>
                        </div>
                        <div style="font-size: 14px; margin-left: 40px; margin-top: 10px;">
                          {{ subComment.commentLines }}
                        </div>
                        <i class="el-icon-delete-solid" id="delete-comment" @click="deleteSubComment(index, i)"
                          v-if="isSelf || isAdmin">&nbsp;&nbsp;删除</i>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </div>
              <el-divider style="margin-top: 20px;" />
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div id="rightSider">
        <div id="profile" @click="goProfile">
          <div>
            <el-avatar :src="author.avatar" :size="80">
            </el-avatar>
            <div id="name-and-lv">
              <span id="author-name">
                <a-icon type="user" />&nbsp;{{ author.username }}
              </span>
              <el-divider></el-divider>
              <!-- <div id="follow-button">
              <el-button></el-button>
            </div> -->

              <span id="author-lv">

              </span>
            </div>

            <div id="author-description">
              {{ author.description || '这个人很懒，什么都没留下' }}
            </div>
          </div>

        </div>

        <div id="study-progress" @click="progressVisible = true;" v-if="audit === false">
          <el-progress type="circle" :percentage="percentage"></el-progress>
          <div style="margin-top:10px;">
            查看我的进度
            <a-icon type="right" />
          </div>
        </div>

        <a-modal v-model="progressVisible" title="本路线学习进度" :footer="null">
          <div style="max-height: 500px;overflow: auto">
            <el-steps :space="100" :active="latestIndex" finish-status="success" direction="vertical">
              <el-step v-for="node in route.nodes" :key="node.title" :title="node.title"></el-step>
            </el-steps>
          </div>

        </a-modal>

        <div id="buttons" v-if="audit === false">
          <a class="small-button" id="like" @click="handleClickLike" @mouseenter="showFullContentLike"
            @mouseleave="hideFullContentLike">
            <a-icon type="like" theme="filled" v-if="liked" />
            <a-icon type="like" v-else />
            <a style="font-size:15px;vertical-align: middle; color: white;">&nbsp;{{ likeContent }}</a>
          </a>

          <a class="small-button" id="star" @click="handleClickStar" @mouseenter="showFullContentStar"
            @mouseleave="hideFullContentStar">
            <a-icon type="star" theme="filled" v-if="starred" />
            <a-icon type="star" v-else />
            <a style="font-size:15px;vertical-align: middle; color: black;">&nbsp;{{ starContent }}</a>
          </a>

          <a class="small-button" id="next" @click="handleClickNext" @mouseenter="showFullContentNext"
            @mouseleave="hideFullContentNext" v-if="isSelf">
            <a-icon type="delete" />
            <a style="font-size:15px;vertical-align: middle; color: white;">&nbsp;{{ nextContent }}</a>

          </a>
          <el-backtop target=".el-scrollbar__wrap" :right="320" :bottom="80">

          </el-backtop>
        </div>
      </div>

    </el-scrollbar>
  </div>
</template>

<script>
import MainHeader from '@/components/MainHeader.vue'
// import 'highlight.js/styles/darcula.css'
// import { marked } from 'marked'
// impo}rt NodeTitle from '@/components/Route/NodeTitle.vue'
import NodeDescription from '@/components/Route/NodeDescription.vue'
import TreeLeft from '@/components/Route/TreeLeft.vue'
import request from '@/API/request'
import { Message } from 'element-ui'
import { MessageBox } from 'element-ui'

export default {
  components: { MainHeader, TreeLeft, NodeDescription },
  data() {
    return {
      /*需要在页面中显示的内容有：
      1.路线的总体介绍，页面一被加载出来就获取到
      2.路线的所有结点的名字，页面一被加载出来就获取到
      3.作者信息，页面一被加载出来就获取到
      4.结点的标题、资源和链接，点击导航栏后请求并加载
      5.本人学习该节点的进度
      6.本人是否点赞、收藏该路线
      */
      route: {
        id: '',
        title: '',
        description: '',
        cover: '',
        views: 0,
        likes: 0,
        collects: 0,
        author: '',
        authorName: '',
        tags: [],
        postTime: '',
        nodes: [],
      },
      author: {},
      /**
       * 评论区相关
       */
      comments: [],
      commentLine: '',
      subCommentLine: '',
      tempComment: '',
      tempSubComment: '',
      /**
       * 学习进度
       */
      isOverview: true,
      currentIndex: 0, //当前正在学习的位置，动态地变化
      latestIndex: 0, //最新的学习进度
      percentage: 0,
      /**
       * other
       */
      liked: false, //是否点赞
      starred: false, //是否收藏
      learned: false,
      //内部数据，控制按钮的伸缩和弹窗的显示
      likeContent: '',
      starContent: '',
      nextContent: '',
      progressVisible: false, //控制学习进度弹窗
    }
  },
  methods: {
    goProfile() {
      this.$router.push({ path: '/user', query: { id: this.route.author } })
    },
    showFullContentLike() {
      setTimeout(() => {
        this.likeContent = this.liked ? '取消喜欢' : '喜欢'
      }, 100)
    },
    hideFullContentLike() {
      this.likeContent = ''
      setTimeout(() => {
        this.likeContent = ''
      }, 100)
    },
    showFullContentStar() {
      setTimeout(() => {
        this.starContent = this.starred ? '取消收藏' : '收藏'
      }, 100)
    },
    hideFullContentStar() {
      this.starContent = ''
      setTimeout(() => {
        this.starContent = ''
      }, 100)
    },
    handleClickLike() {
      //todo: 向后端发送请求
      if (!this.liked) {
        request.get('/route/like', {
          params: {
            userId: this.$store.state.userInfo.id,
            routeId: this.route.id
          }
        }).then((res) => {
          if (res.data.code === 200) {
            Message({
              type: 'success',
              message: '点赞成功',
              customClass: 'message-global'
            })
            this.liked = !this.liked
            this.likeContent = this.liked ? '取消点赞' : '点赞'
          } else {
            Message({
              type: 'error',
              message: res.data.msg,
              customClass: 'message-global'
            })
          }
        }).catch((err) => {
          Message({
            type: 'error',
            message: err,
            customClass: 'message-global'
          })
        })
      } else {
        request.get('/route/unlike', {
          params: {
            userId: this.$store.state.userInfo.id,
            routeId: this.route.id
          }
        }).then((res) => {
          if (res.data.code === 200) {
            Message({
              type: 'success',
              message: '取消点赞成功',
              customClass: 'message-global'
            })
            this.liked = !this.liked
            this.likeContent = this.liked ? '取消点赞' : '点赞'
          } else {
            Message({
              type: 'error',
              message: res.data.msg,
              customClass: 'message-global'
            })
          }
        }).catch((err) => {
          Message({
            type: 'error',
            message: err,
            customClass: 'message-global'
          })
        })
      }
    },
    handleClickStar() {
      //todo：向后端发送请求
      if (!this.starred) {
        request.get('/route/collect', {
          params: {
            userId: this.$store.state.userInfo.id,
            routeId: this.route.id
          }
        }).then((res) => {
          if (res.data.code === 200) {
            Message({
              type: 'success',
              message: '收藏成功',
              customClass: 'message-global'
            })
            this.starred = !this.starred
            this.starContent = this.starred ? '取消收藏' : '收藏'
          } else {
            Message({
              type: 'error',
              message: res.data.msg,
              customClass: 'message-global'
            })
          }
        }).catch((err) => {
          Message({
            type: 'error',
            message: err,
            customClass: 'message-global'
          })
        })
      } else {
        request.get('/route/cancel/collect', {
          params: {
            userId: this.$store.state.userInfo.id,
            routeId: this.route.id
          }
        }).then((res) => {
          if (res.data.code === 200) {
            Message({
              type: 'success',
              message: '取消收藏成功',
              customClass: 'message-global'
            })
            this.starred = !this.starred
            this.starContent = this.starred ? '取消收藏' : '收藏'
          } else {
            Message({
              type: 'error',
              message: res.data.msg,
              customClass: 'message-global'
            })
          }
        }).catch((err) => {
          Message({
            type: 'error',
            message: err,
            customClass: 'message-global'
          })
        })
      }
    },
    handleClickLearn() {
      if (!this.learned) {
        request.get('/route/learn', {
          params: {
            userId: this.$store.state.userInfo.id,
            routeId: this.route.id
          }
        }).then((res) => {
          if (res.data.code === 200) {
            Message({
              type: 'success',
              message: '开始学习！',
              customClass: 'message-global'
            })
            this.learned = !this.learned
          } else {
            Message({
              type: 'error',
              message: res.data.msg,
              customClass: 'message-global'
            })
          }
        }).catch((err) => {
          Message({
            type: 'error',
            message: err,
            customClass: 'message-global'
          })
        })
      } else {
        MessageBox.confirm('放弃学习将清空所记录的学习进度，您确定要放弃吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          request.get('/route/cancel/learn', {
            params: {
              userId: this.$store.state.userInfo.id,
              routeId: this.route.id
            }
          }).then((res) => {
            if (res.data.code === 200) {
              Message({
                type: 'success',
                message: '已取消学习',
                customClass: 'message-global'
              })
              this.learned = !this.learned
              this.percentage = 0
            } else {
              Message({
                type: 'error',
                message: res.data.msg,
                customClass: 'message-global'
              })
            }
          }).catch((err) => {
            Message({
              type: 'error',
              message: err,
              customClass: 'message-global'
            })
          })
        }).catch(() => {
          this.learned = true
        })
      }
    },
    handleClickNext() {
      MessageBox.confirm('确定要删除该路线吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        request.get('/route/delete', {
          params: {
            userId: this.$store.state.userInfo.id,
            routeId: this.route.id
          }
        }).then((res) => {
          if (res.data.code === 200) {
            Message({
              type: 'success',
              message: '删除成功',
              customClass: 'message-global'
            })
            this.$router.back()
          } else {
            Message({
              type: 'error',
              message: res.data.msg,
              customClass: 'message-global'
            })
          }
        }).catch((err) => {
          Message({
            type: 'error',
            message: err,
            customClass: 'message-global'
          })
        })
      }).catch(() => {
      })
    },
    showFullContentNext() {
      setTimeout(() => {
        this.nextContent = '删除路线'
      }, 100)
    },
    hideFullContentNext() {
      setTimeout(() => {
        this.nextContent = ''
      }, 100)
    },
    submitComment() {
      this.commentLine = this.tempComment
      request.post('/user/comment/release', {
        commentatorId: this.$store.state.userInfo.id,
        routeId: this.route.id,
        commentLines: this.commentLine
      }).then((res) => {
        if (res.data.code === 200) {
          var comment = {
            id: res.data.data,
            routeId: this.route.id,
            userId: this.$store.state.userInfo.id,
            username: this.$store.state.userInfo.username,
            avatar: this.$store.state.userInfo.avatar,
            commentLines: this.commentLine,
            subComments: []
          }
          this.comments.push(comment)
          Message({
            type: 'success',
            message: '评论成功',
            customClass: 'message-global'
          })
        } else {
          Message({
            type: 'error',
            message: res.data.msg,
            customClass: 'message-global'
          })
        }
      }).catch((err) => {
        Message({
          type: 'error',
          message: err,
          customClass: 'message-global'
        })
      })
      this.tempComment = ''
    },
    submitSubComment(index) {
      this.subCommentLine = this.tempSubComment
      request.post('/user/subcomment/release', {
        commentId: this.comments[index].id,
        commentatorId: this.$store.state.userInfo.id,
        receiverId: this.comments[index].userId,
        commentLines: this.subCommentLine
      }).then((res) => {
        if (res.data.code === 200) {
          var subComment = {
            id: res.data.data,
            commentId: this.comments[index].id,
            cId: this.$store.state.userInfo.id,
            username: this.$store.state.userInfo.username,
            avatar: this.$store.state.userInfo.avatar,
            commentLines: this.subCommentLine
          }
          this.comments[index].subComments.push(subComment)
          Message({
            type: 'success',
            message: '评论成功',
            customClass: 'message-global'
          })
        } else {
          Message({
            type: 'error',
            message: res.data.msg,
            customClass: 'message-global'
          })
        }
      }).catch((err) => {
        Message({
          type: 'error',
          message: err,
          customClass: 'message-global'
        })
      })
      this.tempSubComment = ''
    },
    deleteComment(index) {
      request.post('/user/comment/delete', {
        userId: this.$store.state.userInfo.id,
        commentId: this.comments[index].id
      }).then((res) => {
        if (res.data.code === 200) {
          this.comments.splice(index, 1)
          Message({
            type: 'success',
            message: '删除成功',
            customClass: 'message-global'
          })
        } else {
          Message({
            type: 'error',
            message: res.data.msg,
            customClass: 'message-global'
          })
        }
      }).catch((err) => [
        Message({
          type: 'error',
          message: err,
          customClass: 'message-global'
        })
      ])
    },
    deleteSubComment(index, i) {
      request.post('/user/subcomment/delete', {
        userId: this.$store.state.userInfo.id,
        subCommentId: this.comments[index].subComments[i].id
      }).then((res) => {
        if (res.data.code === 200) {
          this.comments[index].subComments.splice(i, 1)
          Message({
            type: 'success',
            message: '删除成功',
            customClass: 'message-global'
          })
        } else {
          Message({
            type: 'error',
            message: res.data.msg,
            customClass: 'message-global'
          })
        }
      }).catch((err) => [
        Message({
          type: 'error',
          message: err,
          customClass: 'message-global'
        })
      ])
    },
  },
  computed: {
    // percentage() {
    //   return Math.floor((this.latestIndex / this.route.nodes.length) * 100)
    // },
    studyContent() {
      return this.learned ? '取消学习' : '开始学习'
    },
    avatar() {
      return this.$store.state.userInfo.avatar
    },
    audit() {
      return this.$route.query.audit === '1'
    },
    isSelf() {
      return this.$store.state.userInfo.id === this.route.author || this.$store.state.userInfo.admin
    },
    isLogin() {
      return this.$store.state.isLogin
    },
    isAdmin() {
      return this.$store.state.userInfo.admin
    }
  },
  mounted() {
    request.get('/route/detail', {
      params: {
        id: this.$route.query.id
      }
    }).then((res) => {
      if (res.data.code === 200) {
        this.route = res.data.data.route;
        this.liked = res.data.data.liked;
        this.starred = res.data.data.collected;
        this.learned = res.data.data.learned;
        this.latestIndex = res.data.data.progress;
        this.percentage = Math.floor((this.latestIndex / this.route.nodes.length) * 100)
        this.isOverview = this.latestIndex == 0
        this.currentIndex =
          this.latestIndex == this.route.nodes.length
            ? this.latestIndex - 1
            : this.latestIndex
        request.get('/route/show/comment', {
          params: {
            routeId: this.route.id
          }
        }).then((res) => {
          if (res.data.code === 200) {
            this.comments = res.data.data;
          } else {
            Message({
              type: 'error',
              message: res.data.msg,
              customClass: 'message-global'
            })
          }
        }).catch((err) => {
          Message({
            type: 'error',
            message: err,
            customClass: 'message-global'
          })
        })
        request.get('/user/get/userinfo', {
          params: {
            id: this.route.author
          }
        }).then((res) => {
          if (res.data.code === 200) {
            this.author = res.data.data
          } else {
            Message({
              type: 'error',
              message: res.data.msg,
              customClass: 'message-global'
            })
          }
        }).catch((err) => {
          Message({
            type: 'error',
            message: err,
            customClass: 'message-globel'
          })
        })
      } else {
        Message({
          type: 'error',
          message: res.data.msg,
          customClass: 'message-global'
        })
      }
    }).catch((err) => {
      Message({
        type: 'error',
        message: err,
        customClass: 'message-globel'
      })
    })
    this.$bus.$on('loadNode', (index, isOverview, isFinished, reachEnd) => {
      if (reachEnd) {
        this.$alert('<strong>恭喜你已经学完本路线全部内容！</strong>', {
          center: true,
          dangerouslyUseHTMLString: true
        })
      }
      if (isFinished) {
        this.latestIndex = index
        request.get('/route/update/progress', {
          params: {
            userId: this.$store.state.userInfo.id,
            routeId: this.route.id,
            progress: this.latestIndex
          }
        }).then((res) => {
          if (res.data.code === 200) {
            this.percentage = Math.floor((this.latestIndex / this.route.nodes.length) * 100)
            Message({
              type: 'success',
              message: '进度已更新',
              customClass: 'message-global'
            })
          } else {
            Message({
              type: 'error',
              message: res.data.msg,
              customClass: 'message-global'
            })
          }
        }).catch((err) => {
          Message({
            type: 'error',
            message: err,
            customClass: 'message-global'
          })
        })
      }
      if (isOverview == false) {
        this.currentIndex = index == this.route.nodes.length ? index - 1 : index
      }
      this.isOverview = isOverview
    })
  },
  beforeDestroy() {
    this.$bus.$off('loadNode')
  },
}
</script>


<style scoped>
#route-nav {
  position: fixed;
  height: 100%;
  border-radius: 10px;
}

#shiny-shadow {
  margin-left: 50px;
  margin-top: 30px;
  align-items: center;
  justify-content: center;
  height: 100px;
  background: transparent;
}

#startStudy {
  border: 2px solid white;
  border-radius: 5px;
  background: #409eff;
  text-transform: uppercase;
  color: white;
  padding: 15px 50px;
  outline: none;
  position: relative;
  overflow: hidden;
  width: 250px;
  font-size: 18px;
}

#startStudy:after {
  content: '';
  display: block;
  position: absolute;
  background: white;
  width: 50px;
  height: 125px;
  opacity: 20%;
  transform: rotate(-45deg);
  top: -36px;
  left: -100px;
}

#startStudy:hover {
  cursor: pointer;
  background-color: rgba(47, 142, 231, 0.623);
}

#startStudy:hover:after {
  left: 120%;
  transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
  -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
}

#route-mid {
  height: 100%;
  margin-top: 50px;
  margin-left: 300px;
  width: calc(100% - 550px);
  /* border: solid; */
  display: inline-block;
}

#buttons {
  width: 200px;
}

#route-main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* background: url('../assets/rbgd7.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat; */
  background-image: linear-gradient(to right bottom, #c4e1ff, white, #c4e1ff);
  min-width: 1200px;
}

#delete-comment:hover {
  color: #409eff;
}

#delete-comment {
  float: right;
  color: gray;
  cursor: pointer;
  transition: all 0.3s;
}

#rightSider {
  position: fixed;
  display: inline-block;
  width: 200px;
}

#profile {
  margin-top: 50px;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid #409eff;
  margin-bottom: 20px;
  transition: all 0.5s ease;
  background-color: #fffcec;
}

#profile:hover {
  box-shadow: 0 0 10px #409eff;
  cursor: pointer;
}

#name-and-lv {
  margin-top: 20px;
  font-size: 15px;
}

#author-name {
  font-weight: 600;
}

#author-name:hover {
  color: white;
  text-shadow: 0px 0px 5px #6d97ed;
  cursor: pointer;
}

#author-lv {
  color: gray;
  font-size: 14px;
}

#author-description {
  margin-top: 10px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#study-progress {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid;
  border-radius: 10px;
  text-align: center;
  height: 200px;
  padding-top: 20px;
  transition: all 0.5s ease;
}

#study-progress:hover {
  box-shadow: 0 0 10px #409eff;
  cursor: pointer;
}

.ant-modal-content {
  height: 400px;
}

:deep .ant-modal-body {
  padding: 50px;
}

#buttons {
  margin-top: 30px;
}

.small-button {
  display: block;
  width: 50px;
  height: 50px;
  color: white;

  text-align: center;
  line-height: 50px;
  border-radius: 15px;
  transition: width 0.5s;
  -webkit-transition: width 0.5s ease;
  overflow: hidden;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  /* margin-left: 10px; */
}

.small-button:hover {
  /* animation: lengthen 0.2s ease 1 forwards; */
  width: 150px;
  border-radius: 15px;
}

#like {
  background-color: #ff95ca;
}

#star {
  background-color: #ffdc35;
  color: black;
}

#next {
  background-color: #b9b9b9;
}

.el-divider {
  margin-top: 20px;
}

.el-scrollbar {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

:deep .github-markdown-body {
  padding: 20px;
}

:deep .el-scrollbar__wrap {
  height: 100%;
  overflow: scroll;
  overflow-x: auto;
}

#comment {
  background-color: rgba(255, 255, 255, 0.5) !important;
  border-radius: 5px !important;

  padding-left: 20px;
  margin: 20px 50px 50px 50px;
}

:deep .el-collapse-item {
  border-radius: 5px !important;
  background-color: transparent !important;
  line-height: 50px !important;
}

:deep .el-collapse-item__wrap {
  border-radius: 15px !important;
  background-color: transparent !important;
  line-height: 50px !important;
}

:deep .el-collapse-item__header {
  border-radius: 15px !important;
  background-color: transparent !important;
  line-height: 50px !important;
}

:deep .el-collapse-item__content {
  line-height: 30px !important;
}

/* @keyframes lengthen {
  from {
    width: 100px;
  }
  to {
    width: 200px;
  }
} */
</style>